<template>
  <div>
    <div class="con">
      <el-input
        class="el-input"
        placeholder="请输入要查询的用户"
        prefix-icon="el-icon-search"
        v-model="msg"
        clearable
      ></el-input>
      <el-button type="primary" class="bnt1" @click="selectImage"
        >查询</el-button
      >
      <el-button type="primary" @click="addImage" class="bnt1"
        >添加图片</el-button
      >
    </div>
    <br />
    <el-table :data="list" stripe style="width: 100%" border>
      <el-table-column
        prop="digital_image_type"
        label="图片类型"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.digital_image_type === 1 ? '图标' : '实物图'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="digital_image_road"
        label="地址"
        header-align="center"
        align="right"
      >
        <template slot-scope="scope">
          <div class="box">
            <img class="img1" :src="scope.row.digital_image_road" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button
            type="warning"
            plain
            @click="changeImage(scope.$index, scope.row)"
            size="mini"
            >修改</el-button
          >
          <el-button
            type="warning"
            plain
            @click="removeImage(scope.$index, scope.row)"
            size="mini"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @current-change="changePage"
      v-show="shows"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      background
      layout="prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 删除 -->
    <el-dialog
      :visible.sync="show"
      width="80%"
      :before-close="removeImage"
      :show-close="false"
    >
      <div>是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="escRemove()">取消</el-button>
        <el-button type="primary" @click="confirmRemove()">确定</el-button>
      </span>
    </el-dialog>
    <!-- 添加 -->
    <el-dialog
      title="添加"
      :visible.sync="show1"
      width="80%"
      :before-close="addImage"
      :show-close="false"
    >
      <form>
        <input type="file" @change="addFile($event)" />
        <button @click="addSubmit($event)">提交</button>
      </form>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="状态" prop="updateType">
          <el-radio v-model="ruleForm.updateType" label="1">图标</el-radio>
          <el-radio v-model="ruleForm.updateType" label="2">实物图</el-radio>
        </el-form-item>

        <!-- <el-form-item label="路径" prop="address">
          <el-input class="inp" v-model="ruleForm.address"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="escAdd()">取消</el-button>
        <el-button type="primary" @click="AddSuccess()">确定</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog
      title="修改"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="changeImage"
      :show-close="false"
    >
      <form>
        <input type="file" @change="getFile($event)" />
        <button @click="submit($event)">提交</button>
      </form>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="状态" prop="type">
          <el-radio v-model="ruleForm.type" label="1">图标</el-radio>
          <el-radio v-model="ruleForm.type" label="2">实物图</el-radio>
        </el-form-item>

        <!-- <el-form-item label="路径" prop="address">
          <el-input class="inp" v-model="ruleForm.address"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="escButton()">取消</el-button>
        <el-button type="primary" @click="changeSuccess()">修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import http from '../api/index';
import axios from 'axios';
export default {
  data() {
    var validateAddress = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入图片地址'));
      } else {
        // var res = /^[a-zA-Z_\W]*[0-9a-zA-Z]+$/;
        // if (value.length < 2 || value.length > 6 || !res.test(value)) {
        //   callback(new Error('长度2-6，不能是特殊字符'));
        // }
        //  else {
        callback();
        // }
      }
    };
    return {
      list: [],
      msg: '',
      currentPage: 1,
      pageSize: 20,
      show: false,
      shows: true,
      show1: false,
      total: 0,
      dialogVisible: false,
      digital_image_id: '',
      file: '',
      ruleForm: {
        type: '',
        address: '',
        updateType: '',
        updateAddress: '',
      },
      rules: {
        address: [
          { required: true, validator: validateAddress, trigger: 'blur' },
        ],
        type: [{ required: true, message: '请选择图片类型', trigger: 'blur' }],
        updateType: [
          { required: true, message: '请选择图片类型', trigger: 'blur' },
        ],
      },
    };
  },
  watch: {
    msg(val) {
      if (val === '') {
        this.shows = true;
        http
          .getImages({
            pages: 1,
          })
          .then((r) => {
            console.log(r);
            this.list = r.data;
            this.total = parseInt(r.msg);
          });
      }
    },
  },
  mounted() {
    http
      .getImages({
        pages: 1,
      })
      .then((r) => {
        console.log(r);
        this.list = r.data;
        this.total = parseInt(r.msg);
      });
  },
  methods: {
    // 分页
    changePage(val) {
      this.currentPage = val;
      http
        .getImages({
          pages: val,
        })
        .then((r) => {
          console.log(r);
          this.list = r.data;
          this.total = parseInt(r.msg);
        });
    },
    // 添加
    addImage() {
      this.show1 = true;
    },
    // 添加成功
    AddSuccess() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          http
            .addImages({
              digital_image_type: this.ruleForm.updateType,
              digital_image_road: this.ruleForm.updateAddress,
            })
            .then((r) => {
              console.log(r);
              http
                .getImages({
                  pages: 1,
                })
                .then((r) => {
                  console.log(r);
                  this.list = r.data;
                  this.total = parseInt(r.msg);
                });
            });
          this.show1 = false;
        }
      });
    },
    // 上传
    addFile(event) {
      this.file = event.target.files[0];
      console.log(this.file);
    },
    addSubmit(event) {
      event.preventDefault();
      let formData = new FormData();
      formData.append('file', this.file);
      axios
        .post('/api/pic/load', formData)
        .then((r) => {
          console.log(r);
          this.ruleForm.updateAddress = r.data.name;
        })
        .catch((err) => {
          alert('上传失败');
          console.log(err);
        });
    },
    // 取消添加
    escAdd() {
      this.$refs.ruleForm.resetFields();
      this.show1 = false;
    },
    // 查询
    selectImage() {
      if (this.msg === '') {
        alert('输入框不能为空');
      } else {
        let reg = /\D/;
        if (!reg.test(this.msg)) {
          this.shows = false;
          http
            .selectImages({
              digital_image_id: parseInt(this.msg),
            })
            .then((r) => {
              console.log(r);
              this.list = r.data;
              console.log(this.list);
            });
        } else {
          alert('只能输入数字！');
        }
      }
    },

    // 上传
    getFile(event) {
      this.file = event.target.files[0];
      console.log(this.file);
    },
    submit(event) {
      event.preventDefault();
      let formData = new FormData();
      formData.append('file', this.file);
      axios
        .post('/api/pic/load', formData)
        .then((r) => {
          console.log(r);
          this.ruleForm.address = r.data.name;
        })
        .catch((err) => {
          alert('上传失败');
          console.log(err);
        });
      // http.upImages({
      //     "this.file":formData
      // }).then(r => {
      //     console.log(r);
      // }).catch(err => {
      //     alert('上传失败');
      //     console.log(err);
      // })
      //   console.log(formData);
    },
    // 修改
    changeImage(index, row) {
      console.log(row);
      this.digital_image_id = row.digital_image_id;
      this.ruleForm.type = row.digital_image_type + '';
      this.ruleForm.address = row.digital_image_road;
      this.dialogVisible = true;
    },
    // 取消修改
    escButton() {
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false;
    },
    // 修改成功
    changeSuccess() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          http
            .changeImages({
              digital_image_id: this.digital_image_id,
              digital_image_type: parseInt(this.ruleForm.type),
              digital_image_road: this.ruleForm.address,
            })
            .then((r) => {
              console.log(r);
              http
                .getImages({
                  pages: this.currentPage,
                })
                .then((r) => {
                  console.log(r);
                  this.list = r.data;
                  this.total = parseInt(r.msg);
                });
            });
          console.log(this.digital_image_id);
          console.log(parseInt(this.ruleForm.type));
          console.log(this.ruleForm.address);
        }
        this.dialogVisible = false;
      });
    },
    // 删除
    removeImage(index, row) {
      this.show = true;
      console.log(row);
      this.digital_image_id = row.digital_image_id;
      console.log(this.digital_image_id);
    },
    // 删除成功
    confirmRemove() {
      http
        .removeImages({
          digital_image_id: this.digital_image_id,
        })
        .then((r) => {
          console.log(r);
          http
            .getImages({
              pages: this.currentPage,
            })
            .then((r) => {
              console.log(r);
              this.list = r.data;
              this.total = parseInt(r.msg);
            });
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success',
          });
        });
      this.show = false;
    },
    // 取消删除
    escRemove() {
      this.show = false;
    },
  },
};
</script>
<style scoped>
.box {
  width: 50px;
  height: 50px;
  border: 1px solid #cccccc;
  margin: 0 auto;
}
.img1 {
  width: auto;
  height: 50px;
}
.bnt1 {
  margin-left: 10px;
}
.el-input {
  width: 400px;
}
.inp {
  width: 800px;
}
</style>